<template>
  <div class="contest">
    <a-row style="margin-top: 10px" justify="center"  class="article">
      <a-col span="24" :md="{span : 22}" :xl="{span : 20}">
        <a-card
            size="small"
            style="width: 100%"
            :tab-list="tabList"
            :active-tab-key="key"
            :loading="loading"
            @tabChange="key => onTabChange(key)"
        >
          <template v-if="!loading && !contestStatus.isNotStartedState()" #tabBarExtraContent>
            <a @click="gotoContest" href="#">进入比赛</a>
          </template>
          <template v-if="key === '基本信息' && !loading">
            <a-descriptions  bordered>
              <a-descriptions-item label="比赛名称" :span="3">{{contest.title}}</a-descriptions-item>
              <a-descriptions-item label="比赛时间" :span="3">{{$dataUtils.parseTime(contest.startTime)}}  -  {{$dataUtils.parseTime(contest.endTime)}}</a-descriptions-item>
              <a-descriptions-item label="赛制" :span="1.5">{{getLabelByValue(COMPETITION_TYPE,contest.type)}}</a-descriptions-item><a-descriptions-item label="类型" :span="1.5">{{getLabelByValue(COMPETITION_AUTH,contest.auth)}}</a-descriptions-item>
              <a-descriptions-item label="报名状态" :span="1.5">
                <a-badge v-if="contest.register" status="success" text="已报名" />
                <a-badge v-else style="cursor: pointer" status="processing" text="点击报名" @click="validate" />
              </a-descriptions-item>
              <a-descriptions-item label="报名人数" :span="1.5">{{contest.registerNum || 0}}人</a-descriptions-item>
              <a-descriptions-item label="比赛进程" :span="1.5">
                <a-badge :color="contestStatus.getState().color" :text="getLabelByValue(COMPETITION_STATUS,contestStatus.getState()?.status)" />
              </a-descriptions-item>
              <a-descriptions-item label="比赛时长" :span="1.5">{{$dataUtils.secondsMatch(contest.duration)}}</a-descriptions-item>
              <a-descriptions-item :label="contestStatus.getState()?.label" :span="3">{{contestStatus.getCountdown()}}</a-descriptions-item>
              <a-descriptions-item
                  v-if="contestStatus.isInProgressState()"
                  label="进度" :span="3">
                <a-progress
                    :stroke-color="{
                      '0%': '#108ee9',
                      '100%': '#87d068',
                    }"
                    :percent="contestStatus.getProgress()"
                />
              </a-descriptions-item>
              <a-descriptions-item label="创建人" :span="3">{{contest.userVO?.nickName}}</a-descriptions-item>
            </a-descriptions>
          </template>
          <template v-if="key === '比赛说明' && !loading">
            <preview-vditor v-if="!loading" :data="contest.description"/>
          </template>
          <template v-if="key === '排行榜' && !loading">
            <ACMRanking v-if="contest.type == 0"/>
            <IORanking v-else/>
          </template>
        </a-card>
      </a-col>
    </a-row>
    <password-modal ref="modal" @handleOk="gotoRegister" />
  </div>
</template>

<script lang="ts" setup>
import Ranking from "@/views/contest/in/Ranking"
import GridContent from "@/components/GridContent"
import PreviewVditor from "@/components/PreviewVditor"
import  PasswordModal  from "@/components/PasswordModal"
import * as api from "@/api/contest"
import {COMPETITION_TYPE,COMPETITION_AUTH,COMPETITION_STATUS,getLabelByValue} from "@/common/enum"
import Match from "@/views/contest/status";
import {message} from "ant-design-vue";
import router from "@/router";
import ACMRanking from "@/views/contest/in/ACMRanking.vue";
import IORanking from "@/views/contest/in/OIRanking.vue";
const { proxy } = getCurrentInstance()
const contestId = ref();
const contestStatus = ref();
const modal = ref(null);
const contest = ref({})
const loading = ref<boolean>(true)
onMounted(async () => {
  contestId.value = useRoute().params.contestId;
  loading.value = true;
  await init();
  contestStatus.value = Match.createContestStatus(new Date(contest.value.startTime),new Date(contest.value.endTime))
  Match.toInterval(contestStatus.value)
  loading.value = false;
})
onUnmounted(() => {
  contestStatus.value.removeInterval();
})
async function init() {
  contest.value = (await api.getContest(contestId.value)).data;
}

const gotoRegister = (from) =>{
  console.log(from)
  const params = {
    cid : contestId.value,
    password : from.password
  }
  api.register(params).then(() => {
    message.success("报名成功！")
    window.location.reload();
  })
}
const validate = () => {
  if(contest.value.check)
    modal.value.openModal();
  else{
    gotoRegister({})
  }
}
const gotoContest = () => {
  const c = router.resolve({
    path: `/contestIn/problemList/${contestId.value}`,
  });
  window.open(c.href, "_blank");
}

const key = ref('基本信息');
const onTabChange = (value: string) => {
  key.value = value;
};

const tabList = [
  {
    key: '基本信息',
    tab: '基本信息',
  },
  {
    key: '比赛说明',
    tab: '比赛说明',
  },
  {
    key: '排行榜',
    tab: '排行榜',
  }
];
</script>
<style scoped>

</style>
